---
title: Slot
description: "`Slot` is a component that merges its props onto its immediate child."
storybook: components-slot--basic
source: components/slot
---

```tsx preview functional
const Button = ({ asChild, ...props }) => {
  const Component = asChild ? Slot : "button"
  return <Component {...props} />
}

return (
  <Button
    asChild
    onClick={(ev) => {
      if (!ev.defaultPrevented) {
        console.log("Not logged because default is prevented.")
      }
    }}
  >
    <a href="/docs/components/slot" onClick={(ev) => ev.preventDefault()}>
      Slot
    </a>
  </Button>
)
```

## Usage

:::code-group

```tsx [package]
import { Slot, Slottable } from "@yamada-ui/react"
```

```tsx [alias]
import { Slot, Slottable } from "@/components/ui"
```

```tsx [monorepo]
import { Slot, Slottable } from "@workspaces/ui"
```

:::

```tsx
<Slot>
  <Slottable />
</Slot>
```

### Multiple Children

`Slot` only accepts a single child element. If you want to accept multiple children, use `Slottable`.

```tsx preview functional
const Button = ({ asChild, children, endIcon, startIcon, ...props }) => {
  const Component = asChild ? Slot : "button"

  return (
    <Component {...props}>
      {startIcon}
      <Slottable>{children}</Slottable>
      {endIcon}
    </Component>
  )
}

return (
  <Button asChild>
    <a href="/docs/components/slot">Slot</a>
  </Button>
)
```
